<template>
	<view>
		<!-- <view class="attention-section">
			<text class="tit">分享后不要忘记复制粘贴【评论区文案】！！！</text>
			<view class="share-btn"><icon-font type="forward" color="#A07B54"></icon-font></view>
		</view> -->
		<!-- <view class="cu-form-group padding-top"><textarea v-model="neirong" class="bg-grey light" style="padding:10px;height: 105px;"></textarea></view> -->
		<view class="padding">
			<text class="text-bold">选择图片</text>
			<text class="text-gray text-sm padding-left">已选择1张图片</text>
		</view>
		<view class="margin-lr solid">
			<scroll-view class="scroll-view_H padding-lr-xs" scroll-x="true" scroll-left="10">
				<view class="cu-avatar xl radius margin" v-for="(item, index) in pItem.smallImages" :key="index" style="height: 150px; width: 150px;" @tap="picCheck(index)">
					<image :src="item" mode="widthFix" style="width: 100%;"></image>
					<view class="cu-tag badge"><icon-font type="checkcircle" size="24" :color="imageColor[index]"></icon-font></view>
				</view>
			</scroll-view>
		</view>
		<view class="flex justify-center padding-lr padding-top padding-bottom-xs">
			<textarea v-model="shareSummary" class="bg-gray light radius" style="padding:10px;height: 180px;width: 100%;"></textarea>
		</view>
		<userButton @submitEvent="copyContent">复制文案</userButton>
		<view class="flex justify-center bg-white" v-if="false">
			<view class="margin">
				<label>
					<checkbox class="orange margin-right-sm round checked" checked="true"></checkbox>
					淘口令
				</label>
			</view>
			<view class="margin">
				<label>
					<checkbox class="orange margin-right-sm round"></checkbox>
					下载链接
				</label>
			</view>
			<view class="margin">
				<label>
					<checkbox class="orange margin-right-sm round"></checkbox>
					邀请码
				</label>
			</view>
		</view>
		<!-- 分享 -->
		<view class="mask-content">
			<view class="share-header">分享图文到</view>
			<view class="share-list flex justify-center">
				<view v-for="(item, index) in shareList" :key="index" class="share-item" @tap="shareToFriend(item.name)">
					<image :src="item.icon" mode=""></image>
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
		<dialog-box :modalName="modalName" @shareToTimeline="shareToTimeline" @cancelShare="cancelShare"></dialog-box>
	</view>
</template>

<script>
import userButton from '@/components/user-button.vue';
import clipboard from '@/common/clipboard.js';
var _self;
export default {
	components: {
		userButton
	},
	data() {
		return {
			pItem: [], //产品对象
			shareList: [
				{
					name: 'weixin',
					icon: '/static/desc/share_wechat.png',
					text: '微信好友'
				},
				{
					name: 'timeline',
					icon: '/static/desc/share_moment.png',
					text: '朋友圈'
				}
			],
			shareSummary: '',
			shareShortUrl: '',
			shareImageList: [0],
			checkedColor: '#ff0000',
			defaultColor: '#bfbfbf',
			imageColor: ['#ff0000'],
			modalName: ''
		};
	},
	onLoad(options) {
		_self = this;
		_self.pItem = JSON.parse(decodeURIComponent(options.cnt));
		_self.pItem.smallImages.forEach((item, index) => {
			if (index > 0) {
				_self.imageColor.push(_self.defaultColor);
			}
		});
		_self.loadData();
	},
	methods: {
		/* 获取淘口令 */
		async loadData() {
			let taoKouLing = await _self.$util.taoKouLingCreate(_self.pItem.promotedUrl);
			_self.shareShortUrl = await _self.$util.shortUrlCreate(_self.pItem.promotedUrl);
			_self.shareSummary = `${_self.pItem.title}
【在售价】￥${_self.pItem.reservePrice}
【券后价】￥${_self.couponPrice()}
【下单连接】${_self.shareShortUrl}
-----------------
復製这条信息(${taoKouLing})，去【tao寶】下单`;
		},

		//券后价
		couponPrice() {
			let zk = _self.pItem.zkFinalPrice != null ? parseFloat(_self.pItem.zkFinalPrice) : 0;
			let cu = _self.pItem.couponAmount != null ? parseFloat(_self.pItem.couponAmount) : 0;
			return _self.$util.FixedCeil2(zk - cu);
		},

		//选择图片
		picCheck(index) {
			let checkedIndex = _self.shareImageList.indexOf(index);
			if (checkedIndex > -1) {
				//已经选择，现在取消选择
				if (_self.shareImageList.length > 1) {
					_self.shareImageList.splice(index, 1);
					Vue.set(_self.imageColor, index, _self.defaultColor);
				} else {
					_self.$util.msg('不能再取消选择了');
				}
			} else {
				//未选择，现在选择
				_self.shareImageList.push(index);
				_self.shareImageList = _self.shareImageList.sort((a, b) => a - b);
				Vue.set(_self.imageColor, index, _self.checkedColor);
			}
		},

		copyContent() {
			uni.setClipboardData({
				data: _self.shareSummary
			});
		},

		//分享
		shareToFriend(name) {
			if (name == 'weixin') {
				_self.shareToWenXin();
			} else {
				//先保存图片
				_self.shareImageList.forEach(item => {
					let tmpUrl = _self.pItem.smallImages[item];

					_self.saveImage(tmpUrl);
				});
				clipboard.setText(_self.shareSummary);
				_self.modalName = 'timeline';
			}
		},

		//取消分享
		cancelShare() {
			_self.modalName = '';
		},

		//分享到朋友圈
		shareToTimeline() {
			_self.modalName = '';
			_self.$util.launchApp();
		},

		//分享到微信
		shareToWenXin() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				summary: _self.shareSummary,
				type: 1,
				success: e => {
					//console.log('success:' + JSON.stringify(e));
				},
				fail: e => {
					//console.log('fail:' + JSON.stringify(e));
				}
			});
		},

		//保存图片至本地相册
		saveImage(imgUrl) {
			uni.downloadFile({
				url: imgUrl,
				success: res => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}
.mask-content {
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	z-index: 999;
	background-color: #ffffff;
	width: 100%;
	.share-header {
		height: 40rpx;
		font-size: $font-base + 2rpx;
		color: font-color-dark;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		padding-top: 10rpx;
		&:before,
		&:after {
			content: '';
			width: 240rpx;
			heighg: 0;
			border-top: 1px solid $border-color-base;
			transform: scaleY(0.5);
			margin-right: 30rpx;
		}
		&:after {
			margin-left: 30rpx;
			margin-right: 0;
		}
	}

	.share-item {
		min-width: 33.33%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 150rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 8rpx;
		}
		text {
			font-size: $font-base;
			color: $font-color-base;
		}
	}
}
</style>
